<template>
	<div>
		<el-drawer title="" :visible.sync="drawer" :direction="direction" :before-close="handleClose" custom-class="drawer-info">
			<div class="info-item">
				<h3 class="title">{{ info.examName }}</h3>
				<div class="info">
					<div>姓名: {{ info.memberName }}</div>
					<div>得分: {{ info.score }}</div>
				</div>

				<div class="question" v-for="(item, index) in info.questions" :key="index">
					<div class="name">{{ index + 1 }}、{{ item.title }} 【{{ item.questionType }}】 ( {{ item.score }}分 )</div>

					<div class="options">
						<template v-for="name in ['A', 'B', 'C', 'D', 'E', 'F']">
							<div
								class="option"
								:class="{
									success: (item.answer || '').includes(name),
									danger: !(item.answer || '').includes(name) && (item.choiceAnswer || '').includes(name),
								}"
								:key="name"
								v-if="item['answer' + name]"
							>
								{{ name }}: {{ item["answer" + name] }}
							</div>
						</template>
					</div>

					<div class="answers">
						<div class="success">正确答案: 【{{ item.answer }}】</div>
						<div :class="item.answer === item.choiceAnswer ? 'success' : 'danger'">你的答案: 【{{ item.choiceAnswer }}】</div>
					</div>
				</div>
			</div>
		</el-drawer>
	</div>
</template>
<script>
import { studyexamMemberDetail } from "@/api/study/exam/studyexamstatisticsmember.js"

export default {
	data() {
		return {
			drawer: true,
			direction: "rtl",
			info: {},
		}
	},
	created() {},
	methods: {
		init(id) {
			if (id) {
				studyexamMemberDetail(id).then(res => {
					this.info = res.data
				})
			}
			this.drawer = true
		},
		// 关闭抽屉
		handleClose(done) {
			done()
		},
	},
}
</script>
<style lang="scss" scoped>
.info-item {
	margin-bottom: 40px;
	margin-left: 20px;
}
.title {
	text-align: center;
	font-weight: 700;
	font-size: 24px;
	color: #333;
	margin-bottom: 10px;
}
.info {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 14px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	div {
		width: 30%;
	}
}

.question {
	padding-block: 20px;
	border-bottom: 1px solid #ccc;
	.name {
		margin-bottom: 10px;
	}
	.options {
		overflow: hidden;
		.option {
			float: left;
			margin-right: 30px;
			margin-bottom: 3px;
		}
		.success {
			color: #6ee37f;
		}
		.danger {
			color: #ff1200;
		}
	}
	.answers {
		margin-top: 10px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 20px;
		.success {
			color: #6ee37f;
		}
		.danger {
			color: #ff1200;
		}
	}
}
</style>
